<template>

	<body>
		<div class="loan_nav col_nav col_share">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>推荐好友</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="recommending_bg">
			<!--
			<div class="interval_T">

			</div>
			-->
			<div class="recommending_text">
				<div>
					<ul>
						<li>
							<img src="@/assets/img/logoN.png" width="100%;">
						</li>
						<li>
							<p>K E 服</p>
						</li>
					</ul>
				</div>
				<!--
				<ul>
					<li><img src="@/assets/img/timg.gif" width="100%"></li>
					<li>
						<p>厦门xxxx网络科技有限公司</p>
					</li>
				</ul>
				-->
				<div class="QR_code">
					<!-- <img src="@/assets/img/236637898a2cd44756cf711044a5e213.png" width="100%" /> -->
					<qrcode v-if="imgUrl" class="img" v-model="imgUrl" type="img"></qrcode>
				</div>
				<div>
					<p>推荐给您的好友，将可以分到申贷好友的代理佣金</p>
				</div>
				<!-- <div class="code_area">
					<ul>
						<li>
							<input type="text" :value="imgUrl"  readonly>
						</li>
						<li>
							<input class="copyBtn" type="button" value="复制" >
						</li>
					</ul>
				</div>
				<div class="recommending_btn">
					<p>推荐给你的好友</p>
					<p>您将可以分到好友的代理佣金</p>
				</div> -->
			</div>
			<div class="share_btn copyBtn">
				<ul>
					<li>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-tubbiao-"></use>
						</svg>
						<p>点击复制专属链接</p>
					</li>
					<li>
						<p>推荐软件给您的微信，qq好友</p>
					</li>
				</ul>
			</div>
		</div>

	</body>
</template>

<script>
import { Qrcode } from 'vux'
import Clipboard from 'clipboard'
export default {
	components: {
		Qrcode,
	},
	data() {
		return {
			imgUrl: null,
			memberId: this.$route.params.id
		}
	},
	created() {
		this.query()
		let baseUrl = this.$router.options.base
		baseUrl = baseUrl ? baseUrl : ''
		this.imgUrl = 'http://' + location.host + baseUrl + '/register?uid=' + this.memberId
	},
	mounted() {
		this.copy()
	},
	methods: {
		query() {
			if (this.memberId) return
			this.$http.get('/app/member/userInfo').then(json => {
				const { code, user } = json
				if (code === 0) {
					// this.$router.replace('/recommending/' + user.memberId)
					location.replace('/recommending/' + user.memberId)
					this.memberId = user.memberId
				}
			})
		},
		copy() {
			let cli = new Clipboard('.copyBtn', {
				text: () => {
					return this.imgUrl
				}
			})
			cli.on('success', e => {
				this.$vux.toast.text('复制成功！')
			})

		}
	},
	// beforeRouteUpdate(to, from, next) {
	// 	this.memberId = to.params.id
	// 	next()
	// }
}
</script>

<style>
/* .QR_code {
  padding: 0.5rem;
  text-align: center;
} */
.QR_code img {
  margin: auto;
  width: 100% !important;
  height: 100% !important;
}
</style>